<template>
    <div id="header">
        <!-- 这部分直接操作了父组件得数据 应该避免 -->
        <a-flex :style="{ ...boxStyle }" justify="space-between" align="center">
            <menu-unfold-outlined v-if="collapsed" class="trigger" @click="$emit('toggleCollapsed')" />
            <menu-fold-outlined v-else class="trigger" @click="$emit('toggleCollapsed')" />

            <a-dropdown :arrow="true">
                <a class="ant-dropdown-link" @click.prevent>
                    <UserOutlined style="font-size: 18px;" />
                    <DownOutlined style="margin-left: 5px;" />
                </a>
                <template #overlay>
                    <a-menu>
                        <a-menu-item>
                            <a @click="() => {
                                $router.push({
                                    name: 'userProfile'
                                })
                            }">个人中心</a>
                        </a-menu-item>
                        <a-menu-item>
                            <a @click="() => {
                                message.success('退出成功')

                                $router.push({
                                    name: 'login'
                                })
                            }">退出登录</a>
                        </a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>

        </a-flex>


    </div>
</template>

<script setup>
import { inject } from 'vue';
import { UserOutlined, MailOutlined, AppstoreOutlined, SettingOutlined, UploadOutlined, MenuUnfoldOutlined, MenuFoldOutlined, DownOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
const collapsed = inject('collapsed')
const boxStyle = {
    width: '100%',
    height: '120px',
    borderRadius: '6px',
    //   border: '1px solid #40a9ff',
};
</script>

<style scoped>
#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 64px;
    /* background: #fff; */
    /* box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08) */
}

.gutter-row {
    width: 100px;
    /* background-color: blue; */
}

a {
    color: #000;
    text-decoration: none;
}
</style>